<template>
  <div class="container">
    <!-- 头部导航 -->
    <div class="index_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">装修公司信息修改<i class="el-icon-close"></i></div>
    </div>
    <div class="title">基础信息</div>
    <div class="container-box">
      <h3 class="marginb20">装修公司基本信息</h3>

      <div class="content-form">

        <el-form ref="form"
                 :model="form"
                 label-position="left">
          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="店铺logo"
                            label-width="80px">
                <el-upload
                    action="/api/client/base/uploadfile"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview_logo"
                    ref="upload"
                    :on-remove="handleRemove_logo"
                    :on-success="handleAvatarSuccess_logo"
                    :before-upload="beforeAvatarUpload_logo"
                    :auto-upload="true"              
                    :limit="1" 
                    :headers="myHeaders"
                    :file-list="logoList"           
                    accept="image/jpeg, image/jpg, image/gif, image/png"    
                    multiple>
                    <i class="el-icon-plus"></i>
                  </el-upload>  
                  <el-dialog :visible.sync="dialogVisible_logo">
                    <img width="100%" :src="dialogImageUrl_logo" alt="">
                  </el-dialog>
              </el-form-item>
            </div>
            <div class="service">
              <el-form-item label="店铺背景"
                            label-width="80px">
                 <el-upload
                    action="/api/client/base/uploadfile"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview_bg"
                    ref="upload"
                    :on-remove="handleRemove_bg"
                    :on-success="handleAvatarSuccess_bg"
                    :before-upload="beforeAvatarUpload_bg"
                    :auto-upload="true"              
                    :limit="1" 
                    :headers="myHeaders"
                    :file-list="bgList"           
                    accept="image/jpeg, image/jpg, image/gif, image/png"    
                    multiple>
                    <i class="el-icon-plus"></i>
                  </el-upload>  
                  <el-dialog :visible.sync="dialogVisible_bg">
                    <img width="100%" :src="dialogImageUrl_bg" alt="">
                  </el-dialog>
              </el-form-item>
            </div>
          </div>
          <div class="form-item marginb20">
            <el-form-item label="名称"
                          label-width="80px">
              <el-input type="text"
                        v-model="form.title"
                        class="form-item-input"
                        ></el-input>
            </el-form-item>
            <!-- <el-button type="text" @click="handleName" class="text">更改</el-button> -->
          </div>
          <div class="form-item marginb20">
            <el-form-item label="地址" label-width="80px">
              <el-select v-model="provinceObj" @change="select1" value-key="cityid" placeholder="请选择省份">
                <el-option
                v-for="item in province"
                :key="item.cityid"
                :label="item.city_name"
                :value="{cityid:item.cityid,city_name:item.city_name}">
                </el-option>
              </el-select>
              <el-select v-model="cityObj" @change="select2" value-key="cityid" placeholder="请选择城市">
                <el-option
                v-for="item in city"
                :key="item.cityid"
                :label="item.city_name"
                :value="{cityid:item.cityid,city_name:item.city_name}">
                </el-option>
              </el-select>
              <el-select v-model="districtObj" @change="select3" value-key="cityid" placeholder="请选择县区">
                <el-option
                v-for="item in district"
                :key="item.cityid"
                :label="item.city_name"
                :value="{cityid:item.cityid,city_name:item.city_name}">
                </el-option>
              </el-select>
              <el-select v-model="streetObj" @change="select4" value-key="cityid" placeholder="请选择街道">
                <el-option
                v-for="item in street"
                :key="item.cityid"
                :label="item.city_name"
                :value="{cityid:item.cityid,city_name:item.city_name}">
                </el-option>
              </el-select>
              <el-input style="width:27%;" v-model="form.address" placeholder="请输入详细地址"></el-input>
            </el-form-item>
          </div>

          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="联系电话"
                            label-width="80px">
                <el-input type="text"
                          v-model="form.phone"
                          ></el-input>
              </el-form-item>
              <!-- <el-button type="text" @click="handlePhone" class="text">更改</el-button> -->
            </div>
            <div class="service">
              <el-form-item label="服务类型"
                            label-width="80px">
                 <el-select
                  v-model="serviceValue"
                  multiple
                  filterable
                  allow-create
                  default-first-option
                  placeholder="请选择服务类型">
                  <el-option
                    v-for="item in serviceList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- <el-button type="text" @click="handleService" class="text">更改</el-button> -->
            </div>
          </div>

          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="服务区域"
                            label-width="80px">
                <el-input type="text"
                          v-model="form.service_area"
                          ></el-input>
              </el-form-item>
              <!-- <el-button type="text" @click="handlePhone" class="text">更改</el-button> -->
            </div>
            <div class="service">
              <el-form-item label="专长风格"
                            label-width="80px">
                 <el-select
                  v-model="styleValue"
                  multiple
                  filterable
                  allow-create
                  default-first-option
                  placeholder="请选择专长风格">
                  <el-option
                    v-for="item in styleList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- <el-button type="text" @click="handleService" class="text">更改</el-button> -->
            </div>
          </div>
     
          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="联系人"
                            label-width="80px">
                <el-input type="text"
                          v-model="form.name"
                          ></el-input>
              </el-form-item>
            </div>
            <div class="tel-input">
              <el-form-item label="从业年限"
                            label-width="80px">
                <el-input type="text"
                          v-model="form.employ_year"
                          ></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="店铺经度"
                            label-width="80px">
                <el-input type="text"
                          v-model="form.lng"
                          ></el-input>
              </el-form-item>
            </div>
            <div class="tel-input">
              <el-form-item label="店铺纬度"
                            label-width="80px">
                <el-input type="text"
                          v-model="form.lat"
                          ></el-input>
              </el-form-item>
            </div>
          </div>
          <!-- 起始报价 -->
          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="起始报价"
                            label-width="80px">
                <el-input type="text"
                          style="width:20%;"
                          v-model="form.start_offer"
                          ></el-input>-
                <el-input type="text"
                          style="width:20%;"
                          v-model="form.end_offer"
                          ></el-input>元/m²
              </el-form-item>
            </div>
          </div>
          <!-- 营业时间 -->
          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="营业时间" label-width="80px">
                <el-select v-model="form.open_day" placeholder="请选择开始">
                  <el-option
                    v-for="item in weekList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                至
                <el-select v-model="form.close_day" placeholder="请选择结束">
                  <el-option
                    v-for="item in weekList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-time-picker
                  is-range
                  v-model="timeHourse"
                  @change="selectHourse"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围">
                </el-time-picker>
              </el-form-item>
            </div>
          </div>
          <!-- 个性签名 -->
          <div class="marginb20" style="width:50%;">
            <div class="tel-input">
              <el-form-item label="个性签名"
                            label-width="80px">
                <el-input type="textarea"
                          rows="2"
                          placeholder="个性签名~"
                          style="width:100%;"
                          v-model="form.sign"
                          ></el-input>
              </el-form-item>
            </div>
          </div>
          <!-- 公司介绍 -->
          <div class="marginb20" style="width:50%;">
            <div class="tel-input">
              <el-form-item label="公司介绍"
                            label-width="80px">
                <el-input type="textarea"
                          rows="4"
                          placeholder="公司介绍~"
                          style="width:100%;"
                          v-model="form.introduction"
                          ></el-input>
              </el-form-item>
            </div>
          </div>
          <!-- 公司资质 -->
          <div class="marginb20" style="width:50%;">
            <div class="service">
              <el-form-item label="公司资质"
                            label-width="80px">
                 <el-upload
                    action="/api/client/base/uploadfile"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview_quality"
                    ref="upload"
                    :on-remove="handleRemove_quality"
                    :on-success="handleAvatarSuccess_quality"
                    :before-upload="beforeAvatarUpload_quality"
                    :auto-upload="true"              
                    :limit="10" 
                    :headers="myHeaders"
                    :file-list="qualityList"           
                    accept="image/jpeg, image/jpg, image/gif, image/png"    
                    multiple>
                    <i class="el-icon-plus"></i>
                  </el-upload>  
                  <el-dialog :visible.sync="dialogVisible_quality">
                    <img width="100%" :src="dialogImageUrl_quality" alt="">
                  </el-dialog>
              </el-form-item>
            </div>
          </div>
          <!-- 荣誉奖项 -->
          <div class="marginb20" style="width:50%;">
            <div class="service">
              <el-form-item label="荣誉奖项"
                            label-width="80px">
                 <el-upload
                    action="/api/client/base/uploadfile"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview_award"
                    ref="upload"
                    :on-remove="handleRemove_award"
                    :on-success="handleAvatarSuccess_award"
                    :before-upload="beforeAvatarUpload_award"
                    :auto-upload="true"              
                    :limit="10" 
                    :headers="myHeaders"
                    :file-list="awardList"           
                    accept="image/jpeg, image/jpg, image/gif, image/png"    
                    multiple>
                    <i class="el-icon-plus"></i>
                  </el-upload>  
                  <el-dialog :visible.sync="dialogVisible_award">
                    <img width="100%" :src="dialogImageUrl_award" alt="">
                  </el-dialog>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" @click="toSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        title: '',
        phone: '',
        employ_year: '',
        service_type: [{
          id:'',
          name:''
        },{
          name:''
        }],
        sign:'',
        address:'',
        open_day:'',
        close_day:'',
        open_time:'',
        close_time:'',
        lng:'',
        lat:''
      },
      serviceList:[],//服务类型
      serviceValue:[], //选中的服务类型

      styleList:[],//专长风格
      styleValue:[],//选中的专长风格
      
      dialogImageUrl_bg: '',
      dialogVisible_bg: false,
      dialogImageUrl_logo: '',
      dialogVisible_logo: false,
      dialogImageUrl_quality: '',
      dialogVisible_quality: false,
      dialogImageUrl_award: '',
      dialogVisible_award: false,
      bgList:[],//背景
      logoList:[],//logo头像
      qualityList:[],//公司资质
      awardList:[],//荣誉奖项

      province:[],
			city:[],
			district:[],
      street:[],
			provinceObj:{},
			cityObj:{},
			districtObj:{},
      streetObj:{},
      myHeaders: {
            'access-token': this.$store.state.token  , //这里重新定义了请求头
            'Authorization': this.$store.state.token ,
            'user-id':this.$store.state.user_id
      },
      weekList:[{
        label:'周一',
        value:'周一'
      },{
        label:'周二',
        value:'周二'
      },{
        label:'周三',
        value:'周三'
      },{
        label:'周四',
        value:'周四'
      },{
        label:'周五',
        value:'周五'
      },{
        label:'周六',
        value:'周六'
      },{
        label:'周日',
        value:'周日'
      }],
      timeHourse:[new Date(2016, 9, 10, 8, 0), new Date(2016, 9, 10, 18, 0)],
    }
  },
   mounted(){
    this.getBuilderInfo()
    this.getServiceType()
    this.getProvince()
  },
  methods: {
    // 获取服务类型与风格
    getServiceType(){
      this.$http.post('/api/admin/base/option/getList').then(res=>{
        console.log(res,'服务类型');
        if(res.code==1){
          this.serviceList = res.data.service_type
          this.styleList = res.data.design_style
        }
      })
    },

    // 选择小时段
    selectHourse(){
      console.log(this.timeHourse,'小时小时');
      if(this.timeHourse){
        this.form.open_time = this.$moment(this.timeHourse[0]).format('HH:mm:ss')
        this.form.close_time = this.$moment(this.timeHourse[1]).format('HH:mm:ss')
      }
    },

    // 获取装修公司信息
    getBuilderInfo(){
      this.logoList=[]
      this.bgList=[]
      let sid = localStorage.getItem('sid');
      this.serviceValue = []
      this.styleValue = []
      this.qualityList = []
      this.awardList = []
      let params = {
        id: sid
      }
      this.$http.post('/api/admin/decoration/Decoration/view',params).then(res => {
        if(res.code==1){
          console.log("data",res);
          this.form = res.data;
          // this.form.open_time = this.$moment(res.data.open_time,'HH:mm:ss').format('HH:mm:ss')
         if(this.form.open_time && this.form.close_time){
            this.form.open_time = this.$moment(res.data.open_time,'HH:mm:ss');
            this.form.close_time = this.$moment(res.data.close_time,'HH:mm:ss');
            this.timeHourse=[this.form.open_time,this.form.close_time]
         }
          console.log(this.timeHourse,'时间时间');
          // 服务类型
          if(Array.isArray(res.data.service_type)){
            res.data.service_type.map(item=>{
              this.serviceValue.push(item.id)
            })
          }else{
            this.serviceValue.push(res.data.service_type.id)
          }
          // 专长风格
          if(Array.isArray(res.data.design_style)){
            res.data.design_style.map(item=>{
              this.styleValue.push(item.id)
            })
          }else{
            this.styleValue.push(res.data.design_style.id)
          }

          // logo
          this.logoList.push({
            id:res.data.avatar.id,
            url:res.data.avatar.path
          })

          // 背景
          this.bgList.push({
            id:res.data.back_thumb_url.id,
            url:res.data.back_thumb_url.path
          })

          // 公司资质
          res.data.quality_thumb_url.map(item=>{
            this.qualityList.push({
              id:item.id,
              url:item.path
            })
          })

          //荣誉奖项
          res.data.award_thumb_url.map(item=>{
            this.awardList.push({
              id:item.id,
              url:item.path
            })
          })

          this.provinceObj = {
              cityid:res.data.province_id,
              city_name:res.data.province
          };
          if(res.data.province_id){
              this.getCityList()
          }
          this.cityObj = {
              cityid:res.data.city_id,
              city_name:res.data.city
          };
          if(res.data.city_id){
              this.getAreaList()
          }
          this.districtObj = {
              cityid:res.data.district_id,
              city_name:res.data.district
          };
          if(res.data.district_id){
              this.getStreetList()
          }
          this.streetObj = {
              cityid:res.data.street_id,
              city_name:res.data.street
          };
        }
      })
    },

    // 店铺logo
     handleRemove_logo(file, fileList) {
       this.logoList = fileList
    },
    handlePictureCardPreview_logo(file) {
        this.dialogImageUrl_logo = file.url;
        this.dialogVisible_logo = true;
    },
    handleAvatarSuccess_logo(res, file,fileList) {
       this.logoList = fileList  
    },
    beforeAvatarUpload_logo(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传商品图片大小不能超过 2MB!');
      }
      return isLt2M;
    },

    // 店铺背景
    handleRemove_bg(file, fileList) {
       this.bgList = fileList
    },
    handlePictureCardPreview_bg(file) {
        this.dialogImageUrl_bg = file.url;
        this.dialogVisible_bg = true;
    },
    handleAvatarSuccess_bg(res, file,fileList) {
       this.bgList = fileList  
    },
    beforeAvatarUpload_bg(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传商品图片大小不能超过 2MB!');
      }
      return isLt2M;
    },

    // 公司资质
    handleRemove_quality(file, fileList) {
       this.qualityList = fileList
    },
    handlePictureCardPreview_quality(file) {
        this.dialogImageUrl_quality = file.url;
        this.dialogVisible_quality = true;
    },
    handleAvatarSuccess_quality(res, file,fileList) {
       this.qualityList = fileList  
    },
    beforeAvatarUpload_quality(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传商品图片大小不能超过 2MB!');
      }
      return isLt2M;
    },

    // 荣誉奖项
    handleRemove_award(file, fileList) {
       this.awardList = fileList
    },
    handlePictureCardPreview_award(file) {
        this.dialogImageUrl_award = file.url;
        this.dialogVisible_award = true;
    },
    handleAvatarSuccess_award(res, file,fileList) {
       this.awardList = fileList  
    },
    beforeAvatarUpload_award(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传商品图片大小不能超过 2MB!');
      }
      return isLt2M;
    },

    // 省份选择
        select1(){
            this.cityObj={}
            this.districtObj={}
            this.streetObj={}
            this.getCityList()
        },
        // 城市选择
        select2(){
            this.districtObj={}
            this.streetObj={}
            if(!this.provinceObj){
                this.$message.warning('请先选择省份')
                return
            }
            this.getAreaList()
        },
        // 县区选择
        select3(){
            this.streetObj={}
            if(!this.cityObj){
                this.$message.warning('请先选择城市')
                return
            }
            this.getStreetList()
        },
        // 街道选择
        select4(){
            if(!this.districtObj){
                this.$message.warning('请先选择县区')
                return
            }
        },
        
        // 获取省份
        getProvince(){
            this.$http.post('/api/admin/base/Region/getProvinceList').then(res=>{
                console.log(res,'省份');
                if(res.code==1){
                    this.province = res.data?res.data:[]
                }
            })
        },
        // 获取城市
        getCityList(){
            this.$http.post('/api/admin/base/Region/getCityList',{province_id:this.provinceObj.cityid}).then(res=>{
                console.log(res,'城市列表');
                if(res.code==1){
                    this.city = res.data?res.data:[]
                }
            })
        },
        // 获取县区
        getAreaList(){
            this.$http.post('/api/admin/base/Region/getDistrictList',{city_id:this.cityObj.cityid}).then(res=>{
                console.log(res,'县区列表');
                if(res.code==1){
                    this.district = res.data?res.data:[]
                }
            })
        },
        // 获取街道
        getStreetList(){
            this.$http.post('/api/admin/base/region/getStreetList',{district_id:this.districtObj.cityid}).then(res=>{
                console.log(res,'街道列表');
                if(res.code==1){
                    this.street = res.data?res.data:[]
                }
            })
        },

    // 提交按钮
    toSubmit(){
      console.log(this.serviceValue);
      // logo
      let logo_id = []
      this.logoList.map(item=>{
        if(item.response){
          logo_id.push(item.response.data.id)
        }else{
          logo_id.push(item.id)
        }
      })
      // 背景
      let bg_id = []
      this.bgList.map(item=>{
        if(item.response){
          bg_id.push(item.response.data.id)
        }else{
          bg_id.push(item.id)
        }
      })
      // 资质
      let quality_id = []
      this.qualityList.map(item=>{
        if(item.response){
          quality_id.push(item.response.data.id)
        }else{
          quality_id.push(item.id)
        }
      })
      // 荣誉奖项
      let award_id = []
      this.awardList.map(item=>{
        if(item.response){
          award_id.push(item.response.data.id)
        }else{
          award_id.push(item.id)
        }
      })

      let params = {
        id:localStorage.getItem('sid'),
        title:this.form.title,
        phone:this.form.phone,
        service_type:this.serviceValue.join(','),
        design_style:this.styleValue.join(','),
        employ_year:this.form.employ_year,
        name:this.form.name,
        start_offer:this.form.start_offer,
        end_offer:this.form.end_offer,
        sign:this.form.sign,
        avatar:logo_id.join(','),
        back_thumb_url:bg_id.join(','),
        quality_thumb_url:quality_id.join(','),
        award_thumb_url:award_id.join(','),

        open_day:this.form.open_day,
        close_day:this.form.close_day,
        open_time:this.form.open_time,
        close_time:this.form.close_time,
        lng:this.form.lng,
        lat:this.form.lat,
        service_area:this.form.service_area,
        introduction:this.form.introduction,

		    province:this.provinceObj.city_name,
		    city:this.cityObj.city_name,
		    district:this.districtObj.city_name,
        street:this.streetObj.city_name,
		    province_id:this.provinceObj.cityid,
		    city_id:this.cityObj.cityid,
		    district_id:this.districtObj.cityid,
		    street_id:this.streetObj.cityid,
        address:this.form.address
      }
      console.log(params,'提交数据');
      this.$http.post('/api/admin/decoration/Decoration/edit',params).then(res=>{
        console.log(res,'编辑结果');
        if(res.code==1){
          this.$message.success('修改成功')
          this.getBuilderInfo()
        }else{
          this.$message.warning(res.msg)
        }
      })
    }

  }

}
</script>

<style scoped lang="less">
.marginb20 {
  margin-bottom: 20px;
}
.form-logo {
  padding: 0 10px;
}
.form-item {
  .el-select{margin-right: 10px}
  display: flex;
  // justify-content: space-between;
  // align-items: center;
  
  .el-form-item {
    width: 90%;
  }
}

.content-form .el-form-item {
  margin-bottom: 0 !important;
}

.form-tel {
  display: flex;
  .tel-input {
    margin-right: 240px;
    display: flex;
    align-items: center;
  }
  .change {
    font-size: 12px;
    color: #5692fa;
    margin-left: 10px;
  }
  .service {
    display: flex;
    align-items: center;
  }
}

.form-time {
  display: flex;
}
.service-time {
  margin-right: 100px;
  margin-left: 8px;
}
.form-textarea {
  padding-left: 14px;
  .el-form-item {
    display: flex;
  }
}
.submit-btn {
  padding: 0 0 50px 0;
}

//图片上传样式
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.form-logo {
  display: flex;
}
.bg-logo {
  margin-right: 250px;
}
//修改的样式
 .text {
    font-size: 12px;
    color: #5692fa;
    margin-left: 10px;
  }
  .btn{
    width: 100%;
    text-align: center;
    margin: 100px 0;
  }
</style>